<template>
  <div class="sync-box">
    <div class="progress" :style="{ width: progressWidth + 'px' }">
      <p>Step {{ active + 1 }}/4</p>
      <el-progress :percentage="(100 / 4) * (active + 1)" />
    </div>
    <One v-if="active == 0" ref="one" :data="form" />
    <Two v-if="active == 1" ref="two" :data="form" />
    <Three v-if="active == 2" ref="three" :data="form" />
    <Four v-if="active == 3" ref="four" :data="form" />
    <!-- <Five v-if="active == 4" ref="four" :data="form" /> -->
    <div class="buttonBox" :style="{ width: progressWidth + 'px' }">
      <el-button
        v-if="active > 0"
        size="medium"
        @click.prevent="handleClick('prev')"
      >上一步</el-button>
      <el-button
        type="primary"
        size="medium"
        @click.prevent="handleClick('next')"
      >{{ active == 4 ? "完成" : "下一步" }}</el-button>
    </div>
  </div>
</template>

<script>
import One from './one.vue'
import Two from './two.vue'
import Three from './three.vue'
import Four from './four.vue'
import Five from './five.vue'

const componentName = ['one', 'two', 'three', 'four', 'five']

export default {
  name: 'TaskDataSync',
  dicts: ['synchronous_tasktype'],
  components: { One, Two, Three, Four, Five },
  data: function() {
    return {
      form: {},
      rules: {},
      active: 0,
      progressWidth: 0
    }
  },
  created() {
    const that = this
    this.$route.meta.title = this.$route.query.id
      ? '修改迁移任务'
      : '新增迁移任务'
  },
  mounted() {
    this.getProgressWidth()
  },
  methods: {
    getProgressWidth() {
      console.log(this.$refs[componentName[this.active]], componentName[this.active])

      this.progressWidth = this.$refs[componentName[this.active]].$el.clientWidth
    },
    handleClick(type) {
      this.active = type === 'next' ? this.active + 1 : this.active - 1
      setTimeout(() => {
        this.getProgressWidth()
      }, 0)
    },
    async dataFusion(form) {
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.sync-box {
  width: 95%;
  height: 100%;
  margin: 1% auto 0 auto;
  position: relative;
  padding-top: 20px;

  .progress{
    margin: 0 auto;
  }

  .buttonBox {
    text-align: right;
    padding: 40px 0 20px 0;
    width: 75%;
    margin: 0 auto;
  }
}

* {
  font-family: alimama, webfont-notdef;
  letter-spacing: 0.5px;
}

::v-deep .el-col {
  display: flex;
  align-items: center;
}

::v-deep .el-form-item {
  margin-bottom: 0 !important;
  padding: 10px 0;
}

::v-deep .el-progress__text {
  display: none;
}
</style>
